﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>用户登录</title>
    <link href="~/layui/css/layui.css" rel="stylesheet" />

    <link href="~/css/login.css" rel="stylesheet" />
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/layui/layui.js"></script>
</head>
<body>

    <div class="container panel-active">
        <!-- 注册 -->
        <div class="formbox register">
            <form action="#" class="form" id="form1">
                <h2 class="title">注 册</h2>
                <input type="text" placeholder="用户名" class="input" />
                <input type="email" placeholder="邮箱" class="input" />
                <input type="password" placeholder="密码" class="input" />
                <button class="btn">注册</button>
            </form>
        </div>

        <!-- 登录 -->
        <div class="formbox login">
            <form class="form" id="form2">
                <h2 class="title">登 录</h2>
                <input type="text" placeholder="请输入账号" id="UserName" class="input" />
                <input type="password" placeholder="请输入密码" id="Password" class="input" />
                <a href="#" class="link">忘记密码？</a>
                <button class="btn" type="button" id="btnLogin">登录</button>
            </form>
        </div>
        <!-- 浮层 -->
        <div class="overlay-box">
            <div class="overlay">
                <div class="panel over-left">
                    <button class="btn" id="signUp">无账号？前往注册</button>
                </div>
                <div class="panel over-right">
                    <button class="btn" id="signIn">已有账号？立即登录</button>
                </div>
            </div>
        </div>
    </div>
    <script>



        $(function () {
            const signInBtn = document.getElementById("signIn");
            const signUpBtn = document.getElementById("signUp");
            const container = document.querySelector(".container");

            signUpBtn.addEventListener("click", () => {
                container.classList.remove("panel-active");
            });

            signInBtn.addEventListener("click", () => {
                container.classList.add("panel-active");
            });

            //登录按钮点击
            $("#btnLogin").click(function () {
                var name = $("#UserName").val();
                var pwd = $("#Password").val();

                $.ajax({
                    type: "post",
                    url: "/Login/getLogin",
                    data: { username: name, password: pwd },
                    success: function (result) {
                        if (result) {
                            layer.msg("登录成功!", { icon: 1, time: 800 }, function () {
                                window.location.href = '/Main/Index';
                            });

                        } else {
                            layer.msg("用户名或密码不正确，登录失败！请重试！！！", { icon: 2 });
                        }
                    }
                });

            });
        });
    </script>
</body>
</html>
